import React, { Suspense } from "react";
import { formatMessage } from 'umi-plugin-react/locale';
import PageLoading from "@/components/PageLoading";
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import { Avatar, Button, Card, Icon, List, message, Modal } from "antd";
import styles from "./index.less";
import { connect } from "dva";
import RobotAdd from "./robotAdd";
import { routerRedux } from "dva/router";
import tableDataCheck from "@/utils/isBackPrevPage";

const { confirm } = Modal;

class RobotList extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			loading: false,
			list: [],
			addVisible: false,
		};
	}

	componentDidMount() {
		this.getRobotList();
	}

	getRobotList = () => {
		const { dispatch } = this.props;
		this.setState({ loading: true }, () => {
			dispatch({
				type: "digitalEmployees/fetchRobotList",
				payload: {},
				callback: (res) => {
					this.setState({
						list: res,
						loading: false,
					});
				},
			});
		});
	};

	handleDelete = (item) => {
		const that = this;
		confirm({
			title: formatMessage({ id: 'robotList.deleteConfirmTitle' }),
			okText: formatMessage({ id: 'common.confirm' }),
			okType: "danger",
			cancelText: formatMessage({ id: 'common.cancel' }),
			onOk() {
				const { dispatch } = that.props;
				const { list, current } = that.state;
				dispatch({
					type: "digitalEmployees/fetchRobotRemove",
					payload: { id: item.id },
					callback: (res) => {
						message.info(res.message);
						//判断是否需要加载上一页数据 2022.4.8
						const newCurrent = tableDataCheck(list, current);
						that.setState({ current: newCurrent }, () => {
							that.getRobotList();
						});
					},
				});
			},
			onCancel() { },
		});
	};

	closeAdd = () => {
		this.setState({ addVisible: false });
	};

	openAdd = () => {
		this.setState({ addVisible: true });
	};

	addRobot = (values) => {
		const { dispatch } = this.props;
		const { list } = this.state;
		let listName = list.map(item => item.name);
		if (listName.indexOf(values.applicationName) > -1) {
			return message.error(formatMessage({ id: 'robotList.appNameExists' }));
		};
		dispatch({
			type: "digitalEmployees/fetchRobotAdd",
			payload: values,
			callback: (res) => {
				// console.log(res);
				if (res.code && res.code === -1) {
					this.RobotAdd.setButtonLoading(false);
					return false;
				};
				message.info(res.message);
				this.getRobotList();
				this.RobotAdd.cancelModal();
			},
		});
	};

	handleEdit = (item) => {
		const { history } = this.props;
		history.push({
			pathname: "/digitalEmployees/robotEdit/" + item.id,
			query: { applicationId: item.id },
		});
	};

	renderCardHead = (item) => {
		let name = '';
		let icon = "";
		let img = "";
		switch (item.applicationPlatform) {
			case 'QWX_NATIVE':
				name = formatMessage({ id: 'robotList.platform.qwxNative' });
				img = '/qw.png'
				break;
			case 'QWX_CORP_BUILD':
				name = formatMessage({ id: 'robotList.platform.qwxCorpBuild' });
				img = '/qw.png'
				break;
			case 'DD_NATIVE':
				name = formatMessage({ id: 'robotList.platform.ddNative' });
				icon = 'dingding'
				break;
			case 'DD_CORP_BUILD':
				name = formatMessage({ id: 'robotList.platform.ddCorpBuild' });
				icon = 'dingding'
				break;
			case 'FS_CORP_BUILD':
				name = formatMessage({ id: 'robotList.platform.fsCorpBuild' });
				img = '/feishuWhite.svg'
				break;
			case 'FS_NATIVE':
				name = formatMessage({ id: 'robotList.platform.fsNative' });
				img = '/feishuWhite.svg'
				break;
			case 'PURE_WEB':
				name = formatMessage({ id: 'robotList.platform.web' });
				icon = 'credit-card'
				break;
			case 'DIGITAL_SCREEN':
				name = formatMessage({ id: 'robotList.platform.digitalScreen' });
				icon = 'fund'
				break;
			default:
				name = formatMessage({ id: 'robotList.platform.web' });
				icon = 'credit-card'
				break;
		}

		if (item.type === 1) {
			name = formatMessage({ id: 'robotList.platform.largeModel' });
		}

		return (
			<div style={{ textAlign: "center", position: "relative", padding: " 20px 0", }}>
				<div style={{ display: "flex", alignItems: "center" }}>
					{
						icon ? <Avatar className={styles.cardAvatar} icon={icon}></Avatar>
							: <Avatar className={styles.cardAvatar} src={staticPath + img}></Avatar>
					}

					<div style={{ fontWeight: "bold", fontSize: "16px", width: 'calc(100% - 80px)', textAlign: 'left' }}>{item.name}</div>
				</div>

				{/* <div className={styles.cardTag}>{name}</div> */}
			</div>
		);
	};

	render() {
		const { loading, current, total, list, addVisible } = this.state;
		return (
			<Suspense fallback={<PageLoading />}>
				<PageHeaderWrapper>
					<div className={styles.robotBox}>
						<div style={{ margin: "24px 0" }}>
							<Button type={"primary"} onClick={this.openAdd}>{formatMessage({ id: 'robotList.addButton' })}</Button>
						</div>
						<List
							rowKey='id'
							loading={loading}
							grid={{ gutter: 10, lg: 4, md: 3, sm: 2, xs: 1 }}
							dataSource={list}
							renderItem={(item) => (
								<List.Item>
									<Card
										className={styles.card}
										actions={item.applicationPlatform == 'SYS_WEB' ? [
											<a onClick={() => this.handleEdit(item)}>{formatMessage({ id: 'common.edit' })}</a>
										] : [
											<a onClick={() => this.handleDelete(item)}>{formatMessage({ id: 'common.delete' })}</a>,
											<a onClick={() => this.handleEdit(item)}>{formatMessage({ id: 'common.edit' })}</a>,
										]}
										bodyStyle={{ padding: "0px" }}
									>
										<Card.Meta title={this.renderCardHead(item)} style={{ margin: "-1px 0" }} />
									</Card>
								</List.Item>
							)}
						/>

						<RobotAdd
							visible={addVisible}
							addRobot={this.addRobot}
							closeAdd={this.closeAdd}
							onRef={(ref) => (this.RobotAdd = ref)}
						/>
					</div>
				</PageHeaderWrapper>
			</Suspense>
		);
	}
}

export default connect(({ user }) => ({
	currentUser: user.currentUser,
}))(RobotList);
